<template>
	<view class="content">
		
		<view class="navbar" :style="{position:headerPosition,top:headerTop}">
			<view class="nav-item" v-for="(item, index) in cateGory" :key="index" :class="{current: filterIndex == item.id}"
			 @click="tabClick(item.id)">{{item.categoryName}}</view>
		</view>
		
		<view class="goods-list">
			<!-- 列表数据 -->
			<view class="mate_text" v-for="(item, index) in viewList" :key="index">
				<!-- 头部 -->
				<view class="mate_header" @click="toDetail(item.id)">
					<image :src="item.avatar" mode=""></image>
					<view class="mate_tit">
						<view class="mate_tita">{{item.userName}}</view>
						<view class="mate_time">{{item.addTime}}</view>
					</view>
				</view>
				
				<!-- 内容 -->
				<view class="mate_content" @click="toDetail(item.id)">{{item.content}}</view>
				
				<!-- 图片 -->
				<view class="mate_image" v-if="item.hasVideo == 1" @click="toDetail(item.id)">
					<image :src="image.imgSrc" v-for="(image, index) in item.imgList" :key="index"></image>
				</view>

				<!-- 视频 -->
				<view class="video_image" v-if="item.hasVideo == 0" @click="toDetail(item.id)"> 
					<video style="width: 100%; height:160px" :src="item.imgSrc" :poster="item.imgSrc + '?x-oss-process=video/snapshot,t_0,f_jpg'" enable-play-gesture v-for="(item,index) in item.imgList" :key="index"></video>
				</view>
				
				<!-- 转发  点赞  保存  评论 -->
				<view class="mate_footer">
					<view class="mate_left">
						<view class="mate_save" @click="save(item.id)">
							<image src="../../static/img/mater/footer_save.png" mode=""></image>
							<view>保存</view>
						</view>
						<view class="mate_transmit" @click="toDetail(item.id)">
							<image src="../../static/img/mater/footer_transmit.png" mode=""></image>
							<view>转发</view>
						</view>
					</view>
					<view class="mate_right">
						<view class="mate_comment" @click="toDetail(item.id)">
							<image src="../../static/img/mater/footer_comment.png" mode=""></image>
							<view>{{item.commentNum}}</view>
						</view>
						<view class="mate_tags" @click="toDetail(item.id)">
							<image src="../../static/img/mater/fotter_tags.png" mode=""></image>
							<view>{{item.thumbsNum}}</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 空白页 -->
			<empty v-if="total == 0"></empty>
			
		</view>
		
		<!--加载loadding-->
		<tui-loadmore v-if="loadding" :index="total" type="primary"></tui-loadmore>
		<tui-nomore v-if="!pullUpOn"></tui-nomore>
		<!--加载loadding-->
		
		<!-- 发布 -->
		<!-- <image class="titimg" src="../../static/img/mater/sucaizhong.png" mode="" @click="release('/pages/material/release')"></image> -->
		<image class="titimg" src="../../static/img/mater/sucaizhong.png" mode="" @click="release('/pages/material/upload')"></image>
		
	</view>
</template>

<script>
	import empty from "@/components/noCheckstand";
	import {mapState} from 'vuex';
	export default {
		components: {
			empty
		},
		data() {
			return {
				scrollTop: 0,
				headerPosition: "fixed", //头部定位
				headerTop: "0px", //头部高度
				filterIndex: "", 					//筛选切换
				viewList: [], 						//列表
				cateGory: [], 						//商品分类
				total:"",							//商品总数
				page:"",							//几页
				pages:"",							//一共多少页
				limit:"",							//一页十条
				loadding: false,					//加载
				pullUpOn: true						//没有数据
				
			};
		},
		// 页面滚动执行方式
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		
		onLoad(options) {
			// #ifdef H5
			this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHeight + 'px';
			// #endif

			// 商品分类
			this.tui.request(
				'/app/material/getMaterialCategory',
				'GET', {
					categoryType: 1,
				},
				false,
				false,
				false,
			).then(res => {
				this.cateGory = res.data.list;
				console.log(this.cateGory[0].id)
				this.filterIndex = this.cateGory[0].id
				// 获取列表数据
				this.loadData();
			
			}).catch(err => {
				console.log(err)
			})
			
		},
		
		computed: {
			...mapState(['hasLogin'])
		},
		
		// 下拉刷新
		onPullDownRefresh: function() {
			this.page = 1;
			this.pullUpOn = true;
			this.loadding = false;
			this.loadData();
			uni.stopPullDownRefresh();
		},
		
		// 上拉加载
		onReachBottom: function() {
			console.log(this.page)
			if (!this.pullUpOn) {
				return;
			}
			this.loadding = true;
			if (this.page == this.pages) {
				this.loadding = false;
				this.pullUpOn = false
			} else {
				++this.page;
				this.loadData();
				this.loadding = false
			}
		},

		methods: {
			// 加载商品 ，带下拉刷新和上滑加载
			loadData() {
				
				this.$http.get(this.tui.interfaceUrl() + '/app/material/materialList?materialCategerId=' + this.filterIndex, {}).then(res => {
					if(res.data.errno == 0){
						console.log(res.data.data.list)
						this.total = res.data.data.total;
						this.page = res.data.data.page;
						this.pages = res.data.data.pages;
						this.limit = res.data.data.limit;
						this.viewList = res.data.data.list;
					}
				
				}).catch(err => {
					console.log(err)
				
				})
				

			},

			//筛选点击
			tabClick(index) {
				console.log(index)
				this.filterIndex = index;
				
				this.$http.get(this.tui.interfaceUrl() + '/app/material/materialList?materialCategerId=' + index, {}).then(res => {
					if(res.data.errno == 0){
						this.total = res.data.data.total;
						this.page = res.data.data.page;
						this.pages = res.data.data.pages;
						this.limit = res.data.data.limit;
						this.viewList = res.data.data.list;
					}
				
				}).catch(err => {
					console.log(err)
				
				})
			},

			// 保存
			save() {
				this.tui.toast("图片已保存，文案已复制")
			},

			// 跳转详情
			toDetail(id) {
				uni.navigateTo({
					url: `/pages/material/materidetail?id=${id}`
				})
			},

			// 发布
			release(url) {
				if (!this.hasLogin) {
					url = '/pages/public/login';
				}
				uni.navigateTo({
					url
				})
			}
		},
	}
</script>

<style lang="scss">
	video {
	    object-fit: fill;
	    object-position: center;
	 }
	page,
	.content {
		background: $page-color-base;
	}

	.content {
		padding-top: 96upx;
	}

	/*头部*/
	.navbar {
		position: fixed;
		left: 0;
		top: var(--window-top);
		display: flex;
		width: 100%;
		height: 80upx;
		background: #fff;
		box-shadow: 0 2upx 10upx rgba(0, 0, 0, .06);
		z-index: 10;

		.nav-item {
			display: flex;
			align-items: center;
			height: 100%;
			font-size: 12px;
			color: $font-color-dark;
			position: relative;
			margin-left: 15px;

			&.current {
				color: #333333;
				font-size: 15px;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 120upx;
					height: 0;
					border-bottom: 4upx solid #6E609E;
				}
			}
		}
	}

	/* 列表 */
	.goods-list {
		display: flex;
		flex-wrap: wrap;
		padding: 0 30upx;
		background: #fff;

		.mate_header {
			display: flex;
			align-items: center;

			image {
				width: 75upx;
				height: 75upx;
				border-radius: 50%;
			}

			.mate_tit {
				margin-left: 10px;
				font-size: 14px;
				color: #333333;

				.mate_time {
					font-size: 12px;
					color: #808080;
				}
			}

		}


		.mate_content {
			font-size: 16px;
			color: #333333;
			padding-top: 10px;
		}

		.mate_image {
			width: 100%;
			padding-top: 10px;
			display: flex;
			// align-items: center;
			// justify-content: flex-start;
			// justify-content: space-between;

			image {
				width: 200upx;
				height: 200upx;

			}

			image:nth-child(2) {
				margin-right: 13px;
				margin-left: 13px;
			}
		}

		.video_image {
			width: 100%;
			padding-top: 10px;

			image {
				width: 100%;
				height: 300upx;

			}
		}

		.mate_text {
			margin-top: 20px;
			width: 100%;
		}

		.mate_footer {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-top: 5px;
			padding-bottom: 5px;

			.mate_left {
				display: flex;
				align-items: center;

				.mate_save {
					display: flex;
					align-items: center;
					font-size: 14px;
					color: #808080;
					margin-right: 10px;

					image {
						width: 14px;
						height: 14px;
						margin-right: 5px;
					}
				}

				.mate_transmit {
					display: flex;
					align-items: center;
					font-size: 14px;
					color: #808080;
					margin-right: 10px;

					image {
						width: 14px;
						height: 14px;
						margin-right: 5px;
					}
				}

			}

			.mate_right {
				display: flex;
				align-items: center;

				.mate_comment {
					display: flex;
					align-items: center;
					font-size: 14px;
					color: #808080;
					margin-right: 10px;

					image {
						width: 14px;
						height: 14px;
						margin-right: 5px;
					}
				}

				.mate_tags {
					display: flex;
					align-items: center;
					font-size: 14px;
					color: #808080;

					image {
						width: 14px;
						height: 14px;
						margin-right: 5px;
					}
				}
			}
		}
	}

	/*发布*/
	.titimg {
		width: 88upx;
		height: 88upx;
		position: fixed;
		bottom: 160upx;
		right: 20px;
		z-index: 999;
	}
	>>>.uni-video-cover{
		z-index: -1;
	
	}
</style>
